<template>
  <div class="body">
    <!--粘性布局-->
    <van-row type="flex" justify="center">
      <van-col span="24" class="s">
        <van-nav-bar fixed safe-area-inset-bottom>
          <template #left>
            <van-icon
              name="points"
              color="#ffffff"
              size="25"
              class="icon"
              @click="Gocliassfication"
            />
          </template>
          <template #title>
            <van-search
              v-model="value"
              shape="round"
              background="#c82519"
              placeholder="请输入搜索关键词"
              class="search"
              @search="searchBuyList"
            >
              <template #label>
                <van-image
                  :src="require('../assets/imgs/京东_logo.jpg')"
                  class="b"
                />
              </template>
            </van-search>
          </template>
          <template #right>
            <div class="font" @click="login" v-if="!showname">
              {{ user.username == "" ? "登录" : user.username }}
            </div>
          </template>
        </van-nav-bar>
      </van-col>
    </van-row>
    <!-- 轮播图效果 -->
    <van-row type="flex" justify="center">
      <van-col span="22" style="margin-left: 1px;margin-top: 46px">
        <van-swipe
          :autoplay="3000"
          indicator-color="white"
          @change="onChange"
          loop
        >
          <van-swipe-item v-for="item in swiperList" :key="item.id">
            <van-image
              width="100%"
              height="100%"
              :src="item.imgUrl"
              radius="20px"
            />
          </van-swipe-item>
        </van-swipe>
      </van-col>
    </van-row>
    <!-- 中间超级品类日 -->
    <van-row type="flex" justify="center" style="margin-top: 5px">
      <van-col span="23">
        <van-image
          width="125"
          height="100"
          v-for="item in centerImg"
          :key="item.id"
          :src="item.imgUrl"
        />
      </van-col>
    </van-row>

    <!-- 宫格效果 -->
    <van-row type="flex" justify="center">
      <van-col class="jd" span="28">
        <van-grid :border="false" :column-num="5" gutter="10px">
          <van-grid-item v-for="item in gridList_1" :key="item.id">
            <van-image width="48" height="45" :src="item.imgUrl" />
            <div class="jd_font">{{ item.name }}</div>
          </van-grid-item>
        </van-grid>
      </van-col>
    </van-row>
    <van-row type="flex" justify="center">
      <van-col class="jd" span="28">
        <van-grid :border="false" :column-num="5" gutter="10px">
          <van-grid-item v-for="item in gridList_2" :key="item.id">
            <van-image width="48" height="45" :src="item.imgUrl" />
            <div class="jd_font">{{ item.name }}</div>
          </van-grid-item>
        </van-grid>
      </van-col>
    </van-row>
    <!-- 京东秒杀 -->
    <van-row type="flex" justify="center" class="buy">
      <van-col span="21">
        <div class="centerBox">
          <div class="font_jd_center">
            京东秒杀
            <!-- 获取系统当前小时 -->
            <div id="a">{{ nowTime }}</div>
            <img
              src="../assets/imgs/秒杀.webp"
              width="24px"
              class="img_miaosha"
            />
            <!-- 倒计时 -->
            <van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
            <a class="a">爆款轮番秒</a>
          </div>
          <van-grid :border="false" :column-num="5">
            <van-grid-item v-for="item in seckillList" :key="item.id">
              <van-image width="45" height="45" :src="item.imgUrl" />
              <div class="price">{{ item.price }}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </van-col>
    </van-row>
    <!--下方商品展示 -->
    <van-row type="flex" justify="center">
      <van-col span="22" class="deep">
        <van-grid :border="false" :column-num="2">
          <van-grid-item
            v-for="item in buyList"
            :key="item.id"
            @click="goDetail(item.id)"
          >
            <div class="try">
              <van-image width="162px" height="150px" :src="item.imgUrl" />
              <div class="for_font">{{ item.title | ellipsis }}</div>
              <div class="for_price">
                <div class="logo">{{ item.logo }}</div>
                {{ item.price }}
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-col>
    </van-row>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "Home",
  components: {
    Tabbar,
  },
  data() {
    return {
      search: "",
      title: "",
      nowTime: "",
      time: 30 * 60 * 60 * 1000,
      value: "",
      showname: false,
      userinfo: {},
      gridList_1: [],
      price: "",
      gridList_2: [],
      swiperList: [],
      seckillList: [],
      buyList: [],
      user: {
        username: "",
        password: "",
      },
      centerImg: [
        {
          id: 1,
          imgUrl: require("../assets/imgs/left.jpg"),
        },
        {
          id: 2,
          imgUrl: require("../assets/imgs/center.jpg"),
        },
        {
          id: 3,
          imgUrl: require("../assets/imgs/right.jpg"),
        },
      ],
    };
  },
  //   监听字数长度
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0, 20) + "...";
      }
      return value;
    },
  },
  mounted() {
    this.nowTimes(); //获取系统当前时间
    this.getAllgrid_1(); //获取所有轮播图下方的宫格图片
    this.getAllgrid_2(); //获取所有轮播图下方的宫格图片
    this.getAllSwip_img(); //获取所有轮播的图片
    this.getAllSeckill(); //获取所有秒杀信息
    this.getAllBuyProduct(); //获取所有商品信息
    this.getUser(); //获取用户信息
  },

  methods: {
    onChange(index) {
      this.current = index;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
    },
    timeFormate(timeStamp) {
      let hour = new Date(timeStamp).getHours();
      this.nowTime = hour;
    },
    login() {
      this.$router.push({
        path: "/login",
      });
    },
    Gocliassfication() {
      this.$router.push("/cliassfication");
    },
    getAllgrid_1() {
      this.$axios
        .get("/products_1")
        .then((res) => {
          if (res.statusText == "OK") {
            this.gridList_1 = res.data;
          } else {
            console.log("出错了");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAllgrid_2() {
      this.$axios
        .get("/products_2")
        .then((res) => {
          if (res.statusText == "OK") {
            this.gridList_2 = res.data;
          } else {
            console.log("出错了");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAllSwip_img() {
      this.$axios
        .get("/swiperList")
        .then((res) => {
          if (res.statusText == "OK") {
            this.swiperList = res.data;
          } else {
            console.log("出错了");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAllSeckill() {
      this.$axios
        .get("/seckill")
        .then((res) => {
          if (res.statusText == "OK") {
            this.seckillList = res.data;
          } else {
            console.log("出错了");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAllBuyProduct() {
      this.$axios
        .get("/buyList")
        .then((res) => {
          if (res.statusText == "OK") {
            this.buyList = res.data;
          } else {
            console.log("出错了");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getUser() {
      this.$axios
        .get("/user")
        .then((res) => {
          if (res.status === 200) {
            this.user = res.data;
          } else {
            console.log("失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跳转详情页
    goDetail(id) {
      this.$router.push({
        path: "/details/" + id,
      });
    },
    // 搜索商品
    searchBuyList() {
      if (this.value.length > 0) {
        this.$axios.get("/buyList?q=" + this.value).then((res) => {
          if (res.statusText == "OK") {
            this.buyList = res.data;
            this.$router.push({
                path: "/details/" + this.buyList[0].id,
            });
            // console.log(this.buyList[0].id);
            this.value = "";
          } else {
            console.log("出错了！");
          }
        });
      } else {
        this.$notify({ type: "warning", message: "请输入搜索关键词" });
      }
    },
  },
};
</script>

<style scoped>
.jd /deep/ .van-grid-item__content {
  background-color: #f6f6f6;
}
.van-nav-bar__right {
  height: 54px;
}
.font {
  font-weight: 400;
  color: white;
  text-align: center;
  margin-bottom: 5px;
}
.van-search__content {
  height: 33px;
}
.s /deep/ .van-nav-bar__left {
  width: 20px;
}
.jd /deep/ .van-grid-item__content {
  background-color: #f6f6f6;
}

.centerBox {
  background-color: white;
  height: 138px;
  width: 345px;
  border-radius: 20px;
}
.font_jd_center {
  font-size: 15px;
  padding: 5px;
  margin-left: 5px;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
body > div > div > div:nth-child(2) {
  background-image: url("../assets/imgs/背景图.jpg");
}
.block {
  border-radius: 5px;
  background-color: #fc4231;
  font-weight: 500;
}
.van-count-down {
  display: inline-block;
  margin-left: 10px;
}
#a {
  display: inline-block;
  margin-left: 8px;
  color: red;
}
.img_miaosha {
  height: 24px;
}
.a {
  color: red;
  margin-left: 35px;
}
.buy /deep/ .van-grid-item {
  height: 80px;
}

.price {
  color: red;
  font-weight: 600;
  margin-top: 5px;
}
.jd_font {
  font-size: 12px;
  margin-top: 5px;
}
.deep /deep/ .van-image__img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
/**下方商品样式*/
.deep /deep/ .van-grid-item__content {
  height: 230px;
  width: 160px;
  margin-top: 22px;
  border-radius: 8px;
  margin-left: 10px;
}
.try .van-img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.van-grid-item /deep/ .try {
  margin-bottom: 10px;
}
.for_font {
  margin-left: 10px;
  font-size: 14px;
}
.for_price {
  color: red;
  font-weight: 500;
  font-size: 20px;
  margin-left: 10px;
  margin-top: 3px;
}
.logo {
  display: inline-block;
  font-size: 12px;
}
.search {
  height: 46px;
}
.b {
  top: 5px;
}
.s /deep/ .van-nav-bar__content {
  background-color: #c82519;
}
.body /deep/ .van-tabbar__placeholder{
  display: inline;
}
</style>